.warp{
  background-color: transparent;
  padding-top: 5vw;
  position: sticky;
  top: 0;
  z-index: 999;
  margin-bottom:5.87vw ;
}
.shoucang-top{
  padding-bottom: 0;
  p{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    img{
      height: 10.8vw;
    }
  }
  p~div{

    height: 11.8vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    &>div{
      width: 15%;
      text-align: center;
    }
    a{
      font-size: 4.267vw;
      width: 100%;
      color: #9b9b9b;
      line-height: 10.8vw;
      box-sizing: border-box;
      &:hover{
        color: #ff689a;
        border-bottom: 1.5vw solid #ff689a;
      }
    }
  }
}
.out{

  background-image: linear-gradient(#ff8960,#ff6d92);
  padding-bottom: 30vw;
}
body{

}
@media screen and (max-width: 375px){
  body{
    height: 100%;

  }
  .out{
    height: 100%;
  }

}
.tansuo{

  width: 92vw;
  margin: 0 auto;
  text-align: center;
  border-radius: 4vw;
  overflow: hidden;

  &>img{

    height: 114.67vw;
    width: 92vw;
  }
}
.operation{
  margin-top: -8.7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  .i1{
    height: 12.93vw;
    width: 12.93vw;
  }
  .i2{
    width: 18.13vw;
    height: 18.13vw;
  }

}
.nickname{
  margin-top: -10vw;
  background: #ffffff;
  height: 30vw;
  padding-top:11.73vw ;
   &>.p1{
     font-size: 5.2vw;
     color: #0f0f0f;
     font-weight: bolder;
   }
  &>.p2{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.6vw;
    color: #9b9b9b;
    span{
      margin-left: 4vw;
      color: #ffffff;
      line-height: 4vw;
      display: block;
      width: 8.67vw;
      border-radius: 2vw;
      height: 4vw;
      background-image: linear-gradient(to right,#ff8960,#ff6d92);
    }
  }
   img{

     height: 2.5vw;
     width: 2vw;

   }
 }